<%-- 
    Document   : index10
    Created on : 2015-9-24, 15:12:20
    Author     : Fire
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="plugins/react/react.js" type="text/javascript"></script>
        <script src="plugins/react/browser.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/babel">
            var Hello = React.createClass({
                getInitialState : function(){
                    return {opacity:1.0}
                },
                componentDidMount : function(){
                    this.timer = setInterval(
                    function(){
                        var opacity = this.state.opacity;
                        opacity -=0.05;
                        if( opacity < 0.01){
                            opacity = 1.0;
                        }
                        this.setState({
                            opacity:opacity
                        });
                    }.bind(this),100        
                    );
                },
                render : function(){
                    return(
                    <div style={{opacity:this.state.opacity}}>
                    Hello {this.props.name}
                    </div>
                    );
                }
            });
            React.render(
               <Hello name="world"/>,
               document.body
                    );
        </script>
    </body>
</html>
